<template>
  <div class="toolbar">
    <div class="head">
      <div class="left">{{ pageSetting.title }}</div>
      <div class="right">
        <a-switch
          v-model="pageSetting.isGrid"
          checked-children="显示辅助网格"
          un-checked-children="隐藏辅助网格"
        ></a-switch>
        <a-button
          v-for="item in buttonList"
          :key="item.type"
          @click="() => handleClick(item.onClick)"
          :title="item.name"
          :disabled="getDisabled(item.disabled)"
        >
          <!-- <a-icon :type="item.icon" /> -->
          {{ item.name }}</a-button
        >
      </div>
    </div>

    <SaveAs />
  </div>
</template>

<script>
import { mapState } from 'vuex'
import getButnList from './buttonList'
import SaveAs from './SaveAs'

export default {
  data() {
    return {
      buttonList: getButnList([
        'prev',
        'next',
        'copy',
        'shear',
        'delete',
        'deleteAll',
        'reset',
        'save',
        'saveAs',
        'preview',
        'cancelList',
      ]),
    }
  },
  methods: {
    handleClick(callback) {
      callback(this)
    },
    getDisabled(callback) {
      return callback(this)
    },
  },
  computed: {
    ...mapState('lowCode', {
      pageSetting: (state) => state.pageSetting,
    }),
  },
  components: {
    SaveAs,
  },
}
</script>

<style lang="less" scoped>
@import url('./index.less');
</style>
